<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="125px" label-position='right' class="app-content" ref="dataForm">
            <div class="box">
                <div class="appTitle">查看详情</div>
                <div class="form-item-title">
                    <span class="title-level">账户信息</span>
                </div>
                <el-row class = "form-line">
                    <el-col :span="8">
                        <el-form-item label="账户名：">
                            <span>{{dataForm.sUserRealName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="账户：">
                            <span>{{dataForm.sCardNo}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属银行：">
                            <span>{{dataForm.bankName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="开户行：">
                            <span>{{dataForm.sBankDesc}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行预留手机号：">
                            <span>{{dataForm.sPhone}}</span>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                
                <el-row class = "form-line">
                    <el-col :span="8">
                        <el-form-item label="申请日期：">
                            <span>{{dataForm.sCreateTime}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="结算区间：">
                            <span>{{dataForm.sBeginTime + ' ~ ' + dataForm.sEndTime}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="结算金额：">
                            <span class="settelColor settelBig">{{dataForm.sMoney}}</span>元
                        </el-form-item>
                    </el-col>
                </el-row>
 
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="结算状态：">
                            <span class="settelColor">{{dataForm.sStatus === '0'? '已结算': dataForm.sStatus === '1'? '处理中': dataForm.sStatus === '2'? '已驳回': dataForm.sStatus === '3'? '未审核': '--'}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="原因：">
                            <span>{{dataForm.sRemark == ''? '--': dataForm.sRemark}}</span>
                        </el-form-item>
                    </el-col>    
                </el-row>
            </div>
        </el-form>
        <!-- <TableLayoutes form-title=""> -->
        <el-tabs>
            <!-- <el-tab-pane> -->
                <div class="tableBox">
                    <div class="table-title" slot="table-title">
                        <span class="table-title-span">结算区间充值明细</span>
                        <div class="btnPosition">
                            <el-button  @click="goBack">返回</el-button>
                            <el-button  @click="exportBtn">导出</el-button>
                        </div>
                    </div>
                    <el-table :data="dataApply" style="width: 100%"  @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable" border>
                        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            
                        <el-table-column label="订单号" align="center"  prop="sOrderNum">
                            <template scope = "scope">
                                {{scope.row.sOrderNum === ''? '--':scope.row.sOrderNum}}
                            </template>
                        </el-table-column>
                        
                        <el-table-column label="充值时间" align="center" prop="sCreateTime">
                            <template scope = "scope">
                                {{scope.row.sCreateTime === null? '--':scope.row.sCreateTime}}
                            </template>
                        </el-table-column>
            
                        <el-table-column label="一卡通卡号" align="center" prop="sCardNumber">
                            <template scope = "scope">
                                {{scope.row.sCardNumber === null? '--': scope.row.sCardNumber}}
                            </template>
                        </el-table-column>
                        
                        <el-table-column label="持卡人" align="center" prop="sStudentName" width="80">
                            <template scope = "scope">
                                {{scope.row.sStudentName? scope.row.sStudentName: scope.row.sTeacherName? scope.row.sTeacherName: '--'}}
                            </template>
                        </el-table-column>
            
                        <el-table-column label="持卡人e学云ID号" prop="sCardholderExueCode" align="center">
                            <template scope = "scope">
                                {{scope.row.sCardholderExueCode === null? '--': scope.row.sCardholderExueCode}}
                            </template>
                        </el-table-column>
            
                        <el-table-column label="支付人（用户名）" align="center" prop="sParentName">
                            <template scope = "scope">
                                {{scope.row.sParentName === null? '--': scope.row.sParentName}}
                            </template>
                        </el-table-column>
            
                        <el-table-column label="支付人ID" align="center" prop="sPayerExueCode">
                            <template scope = "scope">
                                {{scope.row.sPayerExueCode === null? '--': scope.row.sPayerExueCode}}
                            </template>
                        </el-table-column> 
            
                        <el-table-column label="手机号" align="center" prop="sPhone"></el-table-column>
            
                        <el-table-column label="支付金额（元）" align="center" prop="sMoney"></el-table-column>
            
                        <el-table-column label="支付方式" align="center" prop="sPaymentMethod">
                            <template scope = "scope">
                                {{scope.row.sPaymentMethod === '0'? 'e学云余额': scope.row.sPaymentMethod === '1'? '支付宝': scope.row.sPaymentMethod === '2'? '微信':scope.row.sPaymentMethod === '3'? '其他':''}}
                            </template>
                        </el-table-column>
            
                        <el-table-column label="充值平台" align="center" prop="sPaymentPlatform">
                            <template scope = "scope">
                                {{scope.row.sPaymentPlatform === '0'? 'e学云': scope.row.sPaymentMethod === '1'? '其他': ''}}
                            </template> 
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container" style="text-align:right">
                        <el-pagination
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listQuery.total"
                            :current-page.sync="listQuery.page"
                            :page-sizes="config.pageSizes"
                            :page-size="config.pageSize"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            <!-- </el-tab-pane> -->
        </el-tabs>
        <!-- </TableLayoutes> -->
    </div>
</template>
 
<script>
import { getSettlementById, pageSettlementDetail } from 'api/settleManagement';
import Levelbar from '../layout/Levelbar';
import { mapState, mapActions, mapGetters } from 'vuex';
import TableLayoutes from 'components/TableLayoutes';
export default{
    name: 'cardDetail',
    components: {Levelbar, TableLayoutes},
    data() {
        return {
            pId: '',
            fSchoolId: '',
            dataForm: {
                sUserRealName: '',
                sCardNo: '',
                bankName: '',
                sBankDesc: '',
                sPhone: '',
                sCreateTime: '',
                sBeginTime: '',
                sEndTime: '',
                sMoney: '',
                
                sRemark: ''
            },
            dataApply: [],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true
        }
        
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid',
            'token'
        ])
    },
    created() {
        this.pId = this.$route.params.pId;
        console.log('this.$route.params.pId', this.$route.params.pId);
        this.getSettlement(this.pId);
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
 
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }, 
 
        getSettlement(pId) {
            console.log('pId', pId);
            getSettlementById(pId).then((res) => {
                this.dataForm = res.data.content;
                this.fSchoolId = this.dataForm.fSchoolId;
                // this.dataForm.sBeginTime, 
                // this.dataForm.sEndTime
                console.log('res', this.dataForm);
            }).then(() => {
                this.searchFetchData();
            });
        },
 
        // 查询
        searchFetchData() {
            pageSettlementDetail(this.listQuery.page, this.config.pageSize, this.fSchoolId, this.dataForm.sBeginTime, this.dataForm.sEndTime).then((response) => {
                // console.log('resq', res);
                if (response.data.status==200) {
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                    this.loading = false;   
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            });
            // querySchoolByPage(this.listQuery.page, this.config.pageSize, this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId, this.formInline.schoolId, this.formInline.typeSchool, this.formInline.leaderName, this.formInline.loginNum).then(response => {              
            //     if (response.data.status==200) {
            //         this.dataApply = response.data.content.list;
            //         this.listQuery.total = response.data.content.pagination.total;
            //         this.loading = false;   
            //     } else {
            //         this.$message({
            //             type: 'warning',
            //             message: response.data.errorMsg
            //         })
            //     }
            // });
        },
 
        // 导出
        exportBtn() {
            window.location.href = `${LOCAL_API.fyq}/settlement/exportSettlementDetail?fSchoolId=${this.fSchoolId}&sBeginTime=${this.dataForm.sBeginTime}&sEndTime=${this.dataForm.sEndTime}&token=${this.token}`;
        },
        
        goBack() {
            window.history.back();
        }
    
    }
}
</script>
 
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }

    .el-tabs{
        margin-top:22px;
        background: #fff;
        // box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
        // -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .tableBox{
        // margin-top:22px;
        padding: 0 20px 30px;
        background: #fff;
        box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .table-title{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        .table-title-span {
            flex: 1;
            line-height: 36px;
        }
    }
    
    .el-form{
        // padding-Top:30px;
        background:#fff;
        // padding-bottom:40px;
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        .appTop{
            padding:40px 0 20px 0px;
            margin-bottom:10px;
            position:relative;
            margin-left:-10px;
        }
        .appTop p{
            margin-left:15px;
        }
        .el-form-item{
            margin-top:8px;
        }
        .appTop:before {
            content: '';           
            float: left;
            border-radius: 2px;
            width:4px;height:20px;
            background:#ff5e2c;
            margin-top:1px;
        }
        .addContinue{
            margin-left:60px;
            margin-top:20px
        }
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .box{
            // box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            // -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            padding:0 50px;
            .form-line{      
                border-bottom: 1px solid #ddd; 
                margin-bottom: 14px;
                // .el-form-item{
                //     margin-top:22px;
                // }      
            }
        }
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
          }
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 60px;
        }
        .settelColor{
            color:#ff5e2c;
        }
        .settelBig{
            font-size:16px;
            font-weight:600;
        }
    }
    
}
 
</style>